<!-- 我的 -->
<template>
  <div class="my-wo">
    <!-- 用户信息 -->
    <div class="user">
      <div>
        <div class="img-vie">
          <img src="/static/images/user-name.png" class="img-user" />
        </div>
        <p class="title">点击登录</p>
      </div>
    </div>
    <!-- 我的资产 -->
    <div class="my-assets">
      <span class="assets-title">我的资产</span>
    </div>
    <!-- 功能组件 -->
    <div class="comprehensive">
      <div class="sive" v-for="(item,index) in items" :key="index" @click="xwlgong(item.path)">
        <i :class="item.icon"></i>
        <p class="rest">{{item.text}}</p>
      </div>
    </div>
    <!-- 表单列 -->
    <div class="my-from">
      <div
        class="my-orders"
        v-for="(itea,index) in iteas"
        :key="index"
        @click="xwlorders(itea.path)"
      >
        <div class="home-orders">
          <i class="orders-i" :class="itea.images"></i>
          <span class="orders-title">{{itea.title}}</span>
        </div>
        <div class="home-right">
          <img class="xiangyou-img" :src="itea.xiangyou" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      items: [
        {
          icon: "iconfont icon-yue",
          text: "待付款",
          path: "/pages/payment/main"
        },
        {
          icon: "iconfont icon-huiyuanqia",
          text: "会员卡",
          path: "/pages/members/main"
        },
        {
          icon: "iconfont icon-jifen",
          text: "积分",
          path: "/pages/integral/main"
        },
        {
          icon: "iconfont icon-youhuiquan",
          text: "优惠券",
          path: "/pages/coupons/main"
        },
        {
          icon: "iconfont icon-maidanjilu",
          text: "买单",
          path: "/pages/paybill/main"
        }
      ],
      iteas: [
        {
          images: "iconfont icon-icon-1",
          title: "我的订单",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/myorder/main"
        },
        {
          images: "iconfont icon-yuyue1",
          title: "我的预约",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/myomake/main"
        },
        {
          images: "iconfont icon-shangcheng1",
          title: "我的拼单",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/mySpell/main"
        },
        {
          images: "iconfont icon-taocan",
          title: "我的套餐",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/package/main"
        },
        {
          images: "iconfont icon-chongzhiqiaguanli",
          title: "我的充值卡",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/myrecharge/main"
        },
        {
          images: "iconfont icon-shangchengdingdan",
          title: "商城订单",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/mymall/main"
        },
        {
          images: "iconfont icon-taocan1",
          title: "中奖记录",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/mywinning/main"
        },
        {
          images: "iconfont icon-taocan1",
          title: "兑换记录",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/myexchange/main"
        },
        {
          images: "iconfont icon-dizhiguanli",
          title: "地址管理",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/myaddres/main"
        },
        {
          images: "iconfont icon-maidanjilu",
          title: "买单记录",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/mypay/main"
        },
        {
          images: "iconfont icon-shangcheng",
          title: "绑定门店",
          xiangyou: "/static/images/xiangyoujiantou.png",
          path: "/pages/mystores/main"
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    xwlgong(path) {
      wx.navigateTo({
        url: path
      });
    },
    // url 跳转
    xwlorders(path) {
      wx.navigateTo({
        url: path
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.user {
  width: 100%;
  height: 300rpx;
  background-color: #ff634e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-vie {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-user {
  width: 130rpx;
  height: 130rpx;
}
.title {
  font-size: 30rpx;
  color: #ffffff;
  margin-top: 10rpx;
  text-align: center;
}
.my-assets {
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
  border-bottom: 1rpx solid #d9d9d9;
}
.assets-title {
  font-size: 34rpx;
  color: #ff634e;
}
/* 功能组件 */
.comprehensive {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.sive {
  width: 25%;
  text-align: center;
}
.sive > img {
  width: 65rpx;
  height: 65rpx;
}
.sive > .iconfont {
  font-size: 24px;
  color: #ff634e;
}
.rest {
  font-size: 28rpx;
  margin-top: 10rpx;
}
/* 表单列 */
.my-from {
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 18rpx;
  box-shadow: 0 0 5px 3px #fff8fa;
}
.my-orders {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
  border-bottom: 1rpx solid #d9d9d9;
}
.home-orders {
  display: flex;
  align-items: center;
}
.orders-i {
  font-size: 24px;
}
.orders-title {
  font-size: 30rpx;
  margin-left: 10rpx;
}
.home-right {
  flex: 0.96;
  text-align: right;
}
.xiangyou-img {
  width: 42rpx;
  height: 42rpx;
  margin-top: 8rpx;
}
</style>